<template>
  <header>
        <nav class="navbar is-transparent" id="yhnav">
          <div class="container">
            <div class="navbar-brand">
              <router-link class="navbar-item has-text-white"
                     :to="{ name: 'Home'}">
                <img src="/static/assets/logo3.png"></img>
              </router-link>

              <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" @click="toggleBurger()">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
              </a>

            </div>

            <div class="navbar-menu has-text-centered" id="ydappNavbar" style="background: #272a35;">
              <div class="navbar-start">
              
              <router-link
                class="navbar-item has-text-white"
                :to="{ name: 'Home'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> 首页 </div>
              </router-link>

              <router-link
                class="navbar-item has-text-white"
                :to="{ name: 'EOS'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> EOS导航 </div>
              </router-link>

              <router-link
                class="navbar-item has-text-white"
                :to="{ name: 'Trx'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> TRX导航 </div>
              </router-link>

              <router-link
                class="navbar-item has-text-white"
                :to="{ name: 'Eth'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> ETH导航 </div>
              </router-link>

              <router-link
                class="navbar-item has-text-white"
                :to="{ name: 'Iost'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> IOST导航 </div>
              </router-link>

              <router-link
                class="navbar-item has-text-white"
                :to="{ name: 'Ont'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> ONT导航 </div>
              </router-link>

              <router-link v-if="isMobile() && userInfo"
                class="navbar-item has-text-white"
                :to="{ name: 'MyInfo'}">
                <div class="is-size-5" style="margin-top: 0.5rem;"> 个人设置 </span></div>
              </router-link>

              </div>
              <div v-if="userInfo" class="navbar-end">
                <div class="navbar-item">
                  <i class="iconfont icon-yonghu" style="font-size: 22px;"></i>
                  &nbsp;&nbsp;&nbsp;&nbsp;

                  <div class="dropdown" id="nav-user">
                    <div class="dropdown-trigger">
                      <a class="button is-dark is-rounded" aria-haspopup="true" aria-controls="dropdown-menu"
                        @click="toggleNavUser()">
                        <span class="has-text-right">{{userInfo.eos_address}}</span>
                      </a>
                    </div>
                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
                      <div class="dropdown-content has-text-centered" style="width: 100px;">
                        <router-link
                          class="navbar-item has-text-blank"
                          :to="{ name: 'MyInfo'}">
                          <div style="margin-top: 0.5rem;"> 个人设置 </span></div>
                        </router-link>

                        <a href="#" class="dropdown-item" @click="doLogout()">
                          退出
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-else class="navbar-end">
                <div class="navbar-item">
                  <a class="button is-dark" @click="doLogin()">登录</a>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
  </header>
</template>

<script>
import { getNetwork, getAnnouncements } from '@/api';
import { mapActions, mapState } from 'vuex';
import API, { eos, currentEOSAccount } from '@/util/api';

export default {
  name: 'Header',
  data() {
    return {
      network: {},
      infos: [],
    };
  },
  async created() {
    this.inviteCode = this.getInviteCode();
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    const connected = await API.connectScatterAsync();
    this.loginScatterAsync(this.inviteCode);
  },
  methods: {
    ...mapActions(['loginScatterAsync', 'logoutAsync', 'connectScatterAsync']),
    toggleNavUser() {
      $("#nav-user").toggleClass("is-active");
    },
    toggleBurger() {
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");
    },
    doLogin() {
      this.loginScatterAsync(this.inviteCode);
    },
    doLogout() {
      this.logoutAsync();
    },
    toggleShow() {
      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      $(".navbar-burger").toggleClass("is-active");
      $(".navbar-menu").toggleClass("is-active");
    },
    isMobile() {
            var check = false;
            (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
            return check;
    },
    getInviteCode() {
          var sPageURL = decodeURIComponent(window.location.search.substring(1)),
          sURLVariables = sPageURL.split('&'),
          sParameterName,
          i;

          for (i = 0; i < sURLVariables.length; i++) {
              sParameterName = sURLVariables[i].split('=');

              if (sParameterName[0] === "r") {
                  return sParameterName[1] === undefined ? 0: sParameterName[1];
              }
          }
          return 0;
        },
  },
  computed: {
    ...mapState(['scatterAccount', 'userInfo']),
  },
  watch: {
  },
};
</script>

<style scoped>
#yhnav {
  background-color: #272a35;
  background-image: none;
}

.navbar-item img {
    max-height: 2.75rem;
}
</style>
